@charset "utf-8";
@import "reset";
@function r($px){
	@return $px/100px*1rem;
}
.web{
	width: r(640px);
	padding-top: r(89px);
	padding-bottom: r(96px);
	//background-color: #f5f5f5;
	header{
		width: r(640px);
		height: r(89px);
		background-color: #B20000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
		padding: 0 r(17px);
		position: fixed;
		top: 0;
		img{
			width: r(264px);
		}
	}
	.content{
		margin: 0 r(29px);
		background-color: white;
		.title{
		//	margin: 0 r(29px);
			margin-top: r(30px);
			padding-bottom: r(10px);
			border-bottom: 1px solid #C5C5C5;
			p:nth-of-type(1){
				font-size: r(30px);
				font-weight: bold;
			}
			p:nth-of-type(2){
				margin-top: r(10px);
				display: flex;
				justify-content: space-between;
				font-size: r(15px);
				color: #C5C5C5;
			}
		}
		.Img{
			width: r(583px);
			height: r(285px);
			margin-top: r(10px);
			img{
				width: 100%;
				height: 100%;
			}
		}
		.Text{
			margin-top: r(20px);
			font-size: r(20px);
			color: #C5C5C5;
		}
		.Text2{
			margin-top: r(20px);
			p{
				font-size: r(30px);
			}
			p:nth-of-type(2){
				i{
					color: #B20000;
				}
				span{
					font-size: r(20px);
					color: #C5C5C5;
					margin-left: r(10px);
				}
			}
			p:nth-of-type(3){
				i{
					color: #B20000;
				}
				span{
					font-size: r(20px);
					color: #C5C5C5;
					margin-left: r(10px);
				}
			}
		}
		.jieshao{
			margin-top: r(20px);
			p{
				font-size: r(25px);
			}
			.renwu{
				width: r(584px);
				margin-top: r(20px);
				display: flex;
				justify-content: space-between;
				.one{
					display: flex;
					justify-content: space-between;
					img{
						width:r(87px);
						height: r(86px);
					}
					p{
						width: r(86px);
						margin-left: r(10px);
						font-size: 10px;
						span{
							display: inline-block;
							transform: scale(0.77);
							transform-origin: left;
							font-size: 7px;
							width: r(118px);
						}
					}
				}
			}
		}
		.box{
			width: r(594px);
			height: r(88px);
			margin-top: r(20px);
			background-color: #B20000;
			p{
				font-size: 15px;
				text-align: center;
				line-height: r(88px);
				font-weight: bold;
				color: white;
				span{
					margin-left: r(20px);
				}
			}
		}
	}
	// hr:nth-of-type(1){
	// 	height: r(30px);
	// 	background-color: #F5F5F5;
	// 	border: none;
	// 	margin-bottom: 0;
	// 	margin-top: 0;
	// 	margin-top: r(20px);
	// }
	.search{
						width: 100%;
						height: 100%;
						background-color: #f1f1f1;
						transform: translateY(100%);
						position: fixed;
						top:0;
						left:0;
						.hotword{
							p{
								font-size: r(40px);
								margin: r(24px) r(34px);
							}
						}		
						.one{
							color:#fefcfd;
							height: r(100px);
							background-color: #1f1f1f;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 r(17px);
							font-size: r(31px);
							.search_box{
								width: r(500px);
								position: relative;
								.search_icon{
									padding-left: r(10px);
									position: absolute;
									top:r(10px);
								}
								.search_1{
									input[type="search"]{
										width: r(500px);
										height: r(58px);
										border-radius: 10px;
										border:solid #fefcfd 0.5px;
										padding-left: r(60px);
										padding-right: r(20px);
										background-color:#1f1f1f ;
										color: white;
								}
							}		
						}
					}
				    .search_world{
				    	margin-left: r(34px);
				    	margin-right: 40px;
						
				    	.line{
				    		display: flex;
				    		justify-content: space-between;
							padding: r(10px) 0;
				    		p{
				    			font-size: r(30px);
								//border: 1px solid black;
								background-color: white;
								padding: r(10px);
				    		}
				    	}
				    }
				}
	.list{
					width:100%;
					height: 100%;
					background-color: #303030;
					transform: translateX(-100%);
					position: fixed;
					top:0;
					overflow: scroll;
					.list_header{
						color:#fefcfd;
						height: r(100px);
						background-color: #21201c;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 r(17px);
						font-size: r(31px);
						.colse{}
						.search_header{
							position: relative;
							.sousuo{
								position: absolute;
								top: r(10px);
								margin-left: 6px;
							}
							.search_input{
								
								input[type="search"]{
									width: r(500px);
									height: r(58px);
									border-radius: 10px;
									border:solid #fefcfd 0.5px;
									padding-left: r(60px);
									padding-right: r(20px);
									background-color:#1f1f1f ;
									color: white;
								}
							}
						}
					}
					hr{
						margin: 0 10px;
						border: 0.5px solid #524e4d;
					}
					.login{
						background-color: #222222;
						height: r(450px);
						position: relative;
						padding-top: r(100px);
						.login_img{
							width: r(180px);
							height: r(180px);
							border-radius: 50%;
							margin: 0 auto;
							// position: absolute;
							// top: r(100px);
							img{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.login_A{
							    width: 50%;
								margin: 0 auto;
								font-size: r(50px);
								p{
									color: white;
									text-align: center;
									a{
										font-size: r(30px);
										color: #505050;
									}
								}
						}
					}
					.operate{
						background-color: #222222;
						margin-top: r(15px);
						//height: 300px;
						.first{		
							color: white;
							font-size: r(30px);
							padding: r(20px);
							label{
								display: flex;
								justify-content: space-between;
							}		
						}	
						input{
							display: contents;
						}
						input:checked + div{
							max-height: r(200px);
							transition: all 1s;
						}
						.second{
							max-height: 0;
							overflow: hidden;
							color: white;
							font-size: r(30px);
							text-align: center;
							//padding: r(20px) 0;
							p{
								padding: r(20px) 0;
							}
						}
					}
				}
}